<template>
  <div>
    <acc-table v-if="type === '列表'" :tableData="listData" :columnDefs="columnDefs" @selection-change='handleSelectionChange'>
      <template #selection/>
      <template #order={index}>
        <span >{{index | orderIndex($parent.pageVo)}}</span>
      </template>
      <template #contact={row}>
        {{ !isShow ? $options.filters.cellularPhone(row.contact) : row.contact || '--' }}
        <!-- {{ $options.filters.cellularPhone(row.contact)}} -->
      </template>
      <template slot="nucleicCode" slot-scope="scope">
        <el-popover placement="bottom" width="180" trigger="click" v-if="scope.row.nucleicUrl">
          <div @click="showPicturePreview(scope.index)">
            <el-image
            fit='fill'
            style="width: 150px; height: 200px"
            :src="`/gateway/api/basic/minio/getFileSource?fileName=${scope.row.nucleicUrl}`"
            />
          </div>
          <span slot="reference" class="cursor" v-if="scope.row.nucleicUrl">{{scope.row.name}}.jpg</span>
        </el-popover>
      </template>
      <template #action={row}>
        <el-button size="mini" v-if="row.noticeStatus === 0 && checkAuthority('/teacher/notice')" type="text" @click="handleInform(row)">通知</el-button>
        <el-button size="mini"  disabled v-if="row.noticeStatus === 1" type="text">已通知</el-button>
      </template>
    </acc-table>
    <AccCard v-if="type === '宫格'" :cardList="listData" :columnDefs="columnDefsCard" @getNextPage="getNextPage" @showPicturePreview="showPicturePreview"/>
  </div>
</template>

<script>
import { columnDefs, columnDefsCard } from './mock'
import AccCard from '../common/AccCard.vue'
import { manualNotice } from '@/views/children/antiepidemic/js/base'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限
export default {
  components: { AccCard },
  props: {
    type: {
      type: String,
      validator (value) {
        return ['列表', '宫格'].includes(value)
      }
    },
    listData: {
      type: Array,
      default () {
        return []
      }
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      queryParams: {},
      columnDefs: [],
      columnDefsCard: [],
      tableData: [],
      currentRow: {},
      centerDialogVisible: false
    }
  },
  mounted () {
    this.columnDefs = columnDefs
    this.columnDefsCard = columnDefsCard
  },
  methods: {
    checkAuthority,
    getNextPage () {
      this.$emit('getNextPage')
    },
    showPicturePreview (value) {
      this.$emit('showPicturePreview', value)
    },
    handleInform (row) {
      this.$confirm('是否通知?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        manualNotice({
          userType: 0,
          infoList: [{
            name: row.name,
            no: row.no
          }]
        }).then(() => {
          this.$message.success(`已通知`)
          this.$emit('handleSearch')
        })
      })
    },
    handleStatus (row) {
      if (row.status !== 3) return
      this.currentRow = row
      this.centerDialogVisible = true
    },
    handleCancel () {
      this.centerDialogVisible = false
    },
    handleSelectionChange (selection) {
      this.$emit('select-row', selection.map(item => item.no))
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
